<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动behavior</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .scroll-behavior {
            scroll-behavior: smooth;
            height: 100vh;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="scroll-behavior">
        <a href="#41">41</a>
        <a href="#1">1</a>
        <a href="">清空</a>
        <h1 id="1">1-1-1</h1>
        <h1>2-2-2</h1>
        <h1>3-3-3</h1>
        <h1>4-4-4</h1>
        <h1>5-5-5</h1>
        <h1>6-6-6</h1>
        <h1>7-7-7</h1>
        <h1>8-8-8</h1>
        <h1>9-9-9</h1>
        <h1>10-10-10</h1>
        <h1>11-11-11</h1>
        <h1>12-12-12</h1>
        <h1>13-13-13</h1>
        <h1>14-14-14</h1>
        <h1>15-15-15</h1>
        <h1>16-16-16</h1>
        <h1>17-17-17</h1>
        <h1>18-18-18</h1>
        <h1>19-19-19</h1>
        <h1>20-20-20</h1>
        <h1>21-21-21</h1>
        <h1>22-22-22</h1>
        <h1>23-23-23</h1>
        <h1>24-24-24</h1>
        <h1>25-25-25</h1>
        <h1>26-26-26</h1>
        <h1>27-27-27</h1>
        <h1>28-28-28</h1>
        <h1>29-29-29</h1>
        <h1>30-30-30</h1>
        <h1>31-31-31</h1>
        <h1>32-32-32</h1>
        <h1>33-33-33</h1>
        <h1>34-34-34</h1>
        <h1>35-35-35</h1>
        <h1>36-36-36</h1>
        <h1>37-37-37</h1>
        <h1>38-38-38</h1>
        <h1>39-39-39</h1>
        <h1>40-40-40</h1>
        <h1 id="41">41-41-41</h1>
        <button onclick="toBack()">回到顶部</button>
        <button onclick="toBttom()">回到底部</button>
        <h1>42-42-42</h1>
        <h1>43-43-43</h1>
        <h1>44-44-44</h1>
        <h1>45-45-45</h1>
        <h1>46-46-46</h1>
        <h1>47-47-47</h1>
        <h1>48-48-48</h1>
        <h1>49-49-49</h1>
        <h1>50-50-50</h1>
        <h1>51-51-51</h1>
        <h1>52-52-52</h1>
        <h1>53-53-53</h1>
        <h1>54-54-54</h1>
        <h1>55-55-55</h1>
        <h1>56-56-56</h1>
        <h1>57-57-57</h1>
        <h1>58-58-58</h1>
        <h1>59-59-59</h1>
        <h1>60-60-60</h1>
        <h1>61-61-61</h1>
        <h1>62-62-62</h1>
        <h1>63-63-63</h1>
        <h1>64-64-64</h1>
        <h1>65-65-65</h1>
        <h1>66-66-66</h1>
        <h1>67-67-67</h1>
        <h1>68-68-68</h1>
        <h1>69-69-69</h1>
        <h1>70-70-70</h1>
        <h1>71-71-71</h1>
        <h1>72-72-72</h1>
        <h1>73-73-73</h1>
        <h1>74-74-74</h1>
        <h1>75-75-75</h1>
        <h1>76-76-76</h1>
        <h1>77-77-77</h1>
        <h1>78-78-78</h1>
        <h1>79-79-79</h1>
        <h1>80-80-80</h1>
        <h1>81-81-81</h1>
        <h1>82-82-82</h1>
        <h1>83-83-83</h1>
        <h1>84-84-84</h1>
        <h1>85-85-85</h1>
        <h1>86-86-86</h1>
        <h1>87-87-87</h1>
        <h1>88-88-88</h1>
        <h1>89-89-89</h1>
        <h1>90-90-90</h1>
        <h1>91-91-91</h1>
        <h1>92-92-92</h1>
        <h1>93-93-93</h1>
        <h1>94-94-94</h1>
        <h1>95-95-95</h1>
        <h1>96-96-96</h1>
        <h1>97-97-97</h1>
        <h1>98-98-98</h1>
        <h1>99-99-99</h1>
        <h1>100-100-100</h1>
        <button onclick="toBack()">回到顶部</button>
    </div>
    <script>
        // 第一种绑定事件
        function toBack() {
            console.log(111)
            let element = document.getElementsByClassName('scroll-behavior')[0];
            // 回到顶部
            element.scrollTo({
                top: 0, left: 0, behavior: "smooth"
            })
        }
        function toBttom() {
            let element = document.getElementsByClassName('scroll-behavior')[0];
            // 回到顶部
            element.scrollTo({
                top: element.scrollHeight, left: 0, behavior: "smooth"
            })
        }
        // 第二种绑定事件
        /*  let element = document.getElementsByClassName('scroll-behavior')[0];
         element.onclick = function () {
             element.scrollTo({
                 top: 0, left: 0, behavior: "smooth"
             })
         } */
        // 第三种绑定事件
        /*  let element = document.getElementsByClassName('scroll-behavior')[0];
         element.addEventListener('click', () => {
             element.scrollTo({
                 top: 0, left: 0, behavior: "smooth"
             })
         }) */
    </script>
</body>

</html>